// main.qml
// Global Styles 适配到 Qt for HarmonyOS
import QtQuick 2.15
import QtQuick.Controls 1.4
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15

ApplicationWindow {
    id: root
    width: Screen.width > 0 ? Screen.width : 1260
    height: Screen.height > 0 ? Screen.height : 2720
    visible: true
    title: "全局样式表示例"
    
    // 当前样式主题
    property string currentTheme: "material"  // material, dark, colorful, minimal
    
    // 全局样式主题定义
    property var themeStyles: {
        "material": {
            backgroundColor: "#F5F5F5",
            buttonColor: "#2196F3",
            buttonHoverColor: "#1976D2",
            buttonPressedColor: "#1565C0",
            textColor: "#333333",
            borderColor: "#CCCCCC",
            fontSize: 28
        },
        "dark": {
            backgroundColor: "#121212",
            buttonColor: "#BB86FC",
            buttonHoverColor: "#9D6DE8",
            buttonPressedColor: "#7C4DFF",
            textColor: "#FFFFFF",
            borderColor: "#424242",
            fontSize: 28
        },
        "colorful": {
            backgroundColor: "#FFF9E6",
            buttonColor: "#FF6B6B",
            buttonHoverColor: "#FF5252",
            buttonPressedColor: "#E53935",
            textColor: "#2C3E50",
            borderColor: "#FFB74D",
            fontSize: 28
        },
        "minimal": {
            backgroundColor: "#FFFFFF",
            buttonColor: "#607D8B",
            buttonHoverColor: "#546E7A",
            buttonPressedColor: "#455A64",
            textColor: "#212121",
            borderColor: "#BDBDBD",
            fontSize: 28
        }
    }
    
    // 全局样式定义（通过属性绑定实现，绑定到当前主题）
    property color globalButtonColor: themeStyles[currentTheme].buttonColor
    property color globalButtonHoverColor: themeStyles[currentTheme].buttonHoverColor
    property color globalButtonPressedColor: themeStyles[currentTheme].buttonPressedColor
    property color globalTextColor: themeStyles[currentTheme].textColor
    property color globalBorderColor: themeStyles[currentTheme].borderColor
    property int globalFontSize: themeStyles[currentTheme].fontSize
    
    // 全局背景色（绑定到当前主题）
    color: themeStyles[currentTheme].backgroundColor
    
    // 切换主题函数
    function switchTheme(themeName) {
        if (themeStyles.hasOwnProperty(themeName)) {
            currentTheme = themeName
            console.log("全局样式: 切换到主题", themeName)
        }
    }
    
    Column {
        anchors.fill: parent
        spacing: 0
        
        // 标题栏（包含标题和主题切换）
        Rectangle {
            width: parent.width
            height: 180
            color: root.color
            
            Column {
                anchors.fill: parent
                spacing: 10
                
                // 标题
                Text {
                    width: parent.width
                    height: 80
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    text: "全局样式表示例"
                    font.pixelSize: 52
                    font.bold: true
                    color: globalTextColor
                }
                
                // 主题切换按钮组
                Row {
                    anchors.horizontalCenter: parent.horizontalCenter
                    spacing: 15
                    
                    Button {
                        text: "Material"
                        width: 120
                        height: 60
                        background: Rectangle {
                            color: currentTheme === "material" ? globalButtonColor : "#E0E0E0"
                            radius: 8
                        }
                        contentItem: Text {
                            text: parent.text
                            color: currentTheme === "material" ? "white" : globalTextColor
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                            font.bold: currentTheme === "material"
                        }
                        onClicked: switchTheme("material")
                    }
                    
                    Button {
                        text: "Dark"
                        width: 120
                        height: 60
                        background: Rectangle {
                            color: currentTheme === "dark" ? globalButtonColor : "#E0E0E0"
                            radius: 8
                        }
                        contentItem: Text {
                            text: parent.text
                            color: currentTheme === "dark" ? "white" : globalTextColor
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                            font.bold: currentTheme === "dark"
                        }
                        onClicked: switchTheme("dark")
                    }
                    
                    Button {
                        text: "Colorful"
                        width: 120
                        height: 60
                        background: Rectangle {
                            color: currentTheme === "colorful" ? globalButtonColor : "#E0E0E0"
                            radius: 8
                        }
                        contentItem: Text {
                            text: parent.text
                            color: currentTheme === "colorful" ? "white" : globalTextColor
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                            font.bold: currentTheme === "colorful"
                        }
                        onClicked: switchTheme("colorful")
                    }
                    
                    Button {
                        text: "Minimal"
                        width: 120
                        height: 60
                        background: Rectangle {
                            color: currentTheme === "minimal" ? globalButtonColor : "#E0E0E0"
                            radius: 8
                        }
                        contentItem: Text {
                            text: parent.text
                            color: currentTheme === "minimal" ? "white" : globalTextColor
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                            font.bold: currentTheme === "minimal"
                        }
                        onClicked: switchTheme("minimal")
                    }
                }
            }
        }
        
        // 使用 TabView 展示不同的样式示例
        TabView {
            id: tabView
            width: parent.width
            height: parent.height - 180
            anchors.horizontalCenter: parent.horizontalCenter
            
            // 1. 全局样式标签页
            Tab {
                title: "全局样式"
                
                Flickable {
                    anchors.fill: parent
                    contentWidth: width
                    contentHeight: contentColumn.height + 40
                    clip: true
                    
                    ScrollBar.vertical: ScrollBar {
                        policy: ScrollBar.AlwaysOn
                    }
                    
                    Column {
                        id: contentColumn
                        width: parent.width
                        spacing: 20
                        topPadding: 20
                        leftPadding: 20
                        rightPadding: 20
                        bottomPadding: 20
                        
                        Text {
                            text: "全局样式表应用于整个应用程序或窗口，会影响所有匹配的控件。"
                            width: parent.width
                            wrapMode: Text.WordWrap
                            font.pixelSize: 26
                            color: globalTextColor
                        }
                        
                        // 全局样式可修改内容说明
                        Rectangle {
                            width: parent.width
                            implicitHeight: infoColumn.height + 40
                            color: root.color
                            border.color: globalBorderColor
                            border.width: 2
                            radius: 8
                            
                            Column {
                                id: infoColumn
                                width: parent.width - 40
                                anchors.centerIn: parent
                                spacing: 12
                                
                                Text {
                                    width: parent.width
                                    text: "📋 全局样式可以修改的内容："
                                    font.pixelSize: 28
                                    font.bold: true
                                    color: globalTextColor
                                    wrapMode: Text.WordWrap
                                }
                                
                                Text {
                                    width: parent.width
                                    text: "1. 按钮颜色（正常/悬停/按下状态）"
                                    font.pixelSize: 24
                                    color: globalTextColor
                                    wrapMode: Text.WordWrap
                                }
                                
                                Text {
                                    width: parent.width
                                    text: "2. 文本颜色和字体大小"
                                    font.pixelSize: 24
                                    color: globalTextColor
                                    wrapMode: Text.WordWrap
                                }
                                
                                Text {
                                    width: parent.width
                                    text: "3. 边框颜色和宽度"
                                    font.pixelSize: 24
                                    color: globalTextColor
                                    wrapMode: Text.WordWrap
                                }
                                
                                Text {
                                    width: parent.width
                                    text: "4. 背景颜色（窗口/控件）"
                                    font.pixelSize: 24
                                    color: globalTextColor
                                    wrapMode: Text.WordWrap
                                }
                                
                                Text {
                                    width: parent.width
                                    text: "5. 圆角半径"
                                    font.pixelSize: 24
                                    color: globalTextColor
                                    wrapMode: Text.WordWrap
                                }
                                
                                Text {
                                    width: parent.width
                                    text: "6. 内边距和外边距"
                                    font.pixelSize: 24
                                    color: globalTextColor
                                    wrapMode: Text.WordWrap
                                }
                                
                                Text {
                                    width: parent.width
                                    text: "💡 提示：点击顶部按钮可以切换不同的全局样式主题！"
                                    font.pixelSize: 24
                                    font.bold: true
                                    color: globalButtonColor
                                    wrapMode: Text.WordWrap
                                    topPadding: 5
                                }
                            }
                        }
                        
                        // 按钮组
                        Column {
                            width: parent.width
                            spacing: 15
                            
                            Text {
                                text: "按钮（应用全局样式）"
                                font.pixelSize: 24
                                font.bold: true
                                color: globalTextColor
                            }
                            
                            Row {
                                width: parent.width
                                spacing: 20
                                
                                Button {
                                    text: "按钮 1"
                                    width: Math.min(200, (parent.width - parent.spacing) / 2)
                                    height: 70
                                    background: Rectangle {
                                        color: parent.pressed ? globalButtonPressedColor : (parent.hovered ? globalButtonHoverColor : globalButtonColor)
                                        radius: 8
                                    }
                                    contentItem: Text {
                                        text: parent.text
                                        color: "white"
                                        horizontalAlignment: Text.AlignHCenter
                                        verticalAlignment: Text.AlignVCenter
                                        font.pixelSize: globalFontSize
                                    }
                                }
                                
                                Button {
                                    text: "按钮 2"
                                    width: Math.min(200, (parent.width - parent.spacing) / 2)
                                    height: 70
                                    background: Rectangle {
                                        color: parent.pressed ? globalButtonPressedColor : (parent.hovered ? globalButtonHoverColor : globalButtonColor)
                                        radius: 8
                                    }
                                    contentItem: Text {
                                        text: parent.text
                                        color: "white"
                                        horizontalAlignment: Text.AlignHCenter
                                        verticalAlignment: Text.AlignVCenter
                                        font.pixelSize: globalFontSize
                                    }
                                }
                            }
                        }
                        
                        // 输入框组
                        Column {
                            width: parent.width
                            spacing: 15
                            
                            Text {
                                text: "输入框（应用全局样式）"
                                font.pixelSize: 24
                                font.bold: true
                                color: globalTextColor
                            }
                            
                            Row {
                                width: parent.width
                                spacing: 20
                                
                                TextField {
                                    placeholderText: "输入框 1"
                                    width: Math.min(200, (parent.width - parent.spacing) / 2)
                                    height: 70
                                    background: Rectangle {
                                        color: "white"
                                        border.color: parent.activeFocus ? globalButtonColor : globalBorderColor
                                        border.width: 2
                                        radius: 8
                                    }
                                    font.pixelSize: globalFontSize
                                }
                                
                                TextField {
                                    placeholderText: "输入框 2"
                                    width: Math.min(200, (parent.width - parent.spacing) / 2)
                                    height: 70
                                    background: Rectangle {
                                        color: "white"
                                        border.color: parent.activeFocus ? globalButtonColor : globalBorderColor
                                        border.width: 2
                                        radius: 8
                                    }
                                    font.pixelSize: globalFontSize
                                }
                            }
                        }
                        
                        // 标签组
                        Column {
                            width: parent.width
                            spacing: 15
                            
                            Text {
                                text: "标签（应用全局样式）"
                                font.pixelSize: 24
                                font.bold: true
                                color: globalTextColor
                            }
                            
                            Row {
                                width: parent.width
                                spacing: 20
                                
                                Text {
                                    text: "标签 1"
                                    font.pixelSize: globalFontSize
                                    color: globalTextColor
                                }
                                
                                Text {
                                    text: "标签 2"
                                    font.pixelSize: globalFontSize
                                    color: globalTextColor
                                }
                            }
                        }
                        
                        // 复选框组
                        Column {
                            width: parent.width
                            spacing: 15
                            
                            Text {
                                text: "复选框（应用全局样式）"
                                font.pixelSize: 24
                                font.bold: true
                                color: globalTextColor
                            }
                            
                            Row {
                                width: parent.width
                                spacing: 20
                                
                                CheckBox {
                                    id: globalCheckbox1
                                    text: "复选框 1"
                                    font.pixelSize: globalFontSize
                                    indicator: Rectangle {
                                        implicitWidth: 40
                                        implicitHeight: 40
                                        x: globalCheckbox1.text ? (globalCheckbox1.mirrored ? globalCheckbox1.width - width - globalCheckbox1.rightPadding : globalCheckbox1.leftPadding) : globalCheckbox1.leftPadding + (globalCheckbox1.availableWidth - width) / 2
                                        y: globalCheckbox1.topPadding + (globalCheckbox1.availableHeight - height) / 2
                                        radius: 6
                                        border.color: globalBorderColor
                                        border.width: 2
                                        color: globalCheckbox1.checked ? globalButtonColor : "white"
                                        
                                        Text {
                                            anchors.centerIn: parent
                                            text: "✓"
                                            color: "white"
                                            font.pixelSize: 28
                                            font.bold: true
                                            visible: globalCheckbox1.checked
                                        }
                                    }
                                }
                                
                                CheckBox {
                                    id: globalCheckbox2
                                    text: "复选框 2"
                                    font.pixelSize: globalFontSize
                                    indicator: Rectangle {
                                        implicitWidth: 40
                                        implicitHeight: 40
                                        x: globalCheckbox2.text ? (globalCheckbox2.mirrored ? globalCheckbox2.width - width - globalCheckbox2.rightPadding : globalCheckbox2.leftPadding) : globalCheckbox2.leftPadding + (globalCheckbox2.availableWidth - width) / 2
                                        y: globalCheckbox2.topPadding + (globalCheckbox2.availableHeight - height) / 2
                                        radius: 6
                                        border.color: globalBorderColor
                                        border.width: 2
                                        color: globalCheckbox2.checked ? globalButtonColor : "white"
                                        
                                        Text {
                                            anchors.centerIn: parent
                                            text: "✓"
                                            color: "white"
                                            font.pixelSize: 28
                                            font.bold: true
                                            visible: globalCheckbox2.checked
                                        }
                                    }
                                }
                            }
                        }
                        
                        // 下拉框组
                        Column {
                            width: parent.width
                            spacing: 15
                            
                            Text {
                                text: "下拉框（应用全局样式）"
                                font.pixelSize: 24
                                font.bold: true
                                color: globalTextColor
                            }
                            
                            Row {
                                width: parent.width
                                spacing: 20
                                
                                ComboBox {
                                    width: Math.min(200, (parent.width - parent.spacing) / 2)
                                    height: 70
                                    model: ["选项 1", "选项 2", "选项 3"]
                                    background: Rectangle {
                                        color: "white"
                                        border.color: parent.hovered ? globalButtonColor : globalBorderColor
                                        border.width: 2
                                        radius: 8
                                    }
                                    contentItem: Text {
                                        text: parent.displayText
                                        color: globalTextColor
                                        font.pixelSize: globalFontSize
                                        leftPadding: 10
                                        verticalAlignment: Text.AlignVCenter
                                    }
                                }
                                
                                ComboBox {
                                    width: Math.min(200, (parent.width - parent.spacing) / 2)
                                    height: 70
                                    model: ["A", "B", "C"]
                                    background: Rectangle {
                                        color: "white"
                                        border.color: parent.hovered ? globalButtonColor : globalBorderColor
                                        border.width: 2
                                        radius: 8
                                    }
                                    contentItem: Text {
                                        text: parent.displayText
                                        color: globalTextColor
                                        font.pixelSize: globalFontSize
                                        leftPadding: 10
                                        verticalAlignment: Text.AlignVCenter
                                    }
                                }
                            }
                        }
                    }
                }
            }
            
            // 2. 样式级联标签页
            Tab {
                title: "样式级联"
                
                Flickable {
                    anchors.fill: parent
                    contentWidth: width
                    contentHeight: cascadeColumn.height + 40
                    clip: true
                    
                    ScrollBar.vertical: ScrollBar {
                        policy: ScrollBar.AlwaysOn
                    }
                    
                    Column {
                        id: cascadeColumn
                        width: parent.width
                        spacing: 20
                        topPadding: 20
                        leftPadding: 20
                        rightPadding: 20
                        bottomPadding: 20
                        
                        Text {
                            text: "样式表具有级联效果，可以在不同级别应用样式。控件级别的样式会覆盖更高级别的样式。"
                            width: parent.width
                            wrapMode: Text.WordWrap
                            font.pixelSize: 26
                            color: globalTextColor
                        }
                        
                        // 1. 仅应用全局样式的按钮
                        Column {
                            width: parent.width
                            spacing: 10
                            
                            Text {
                                text: "仅全局样式"
                                font.pixelSize: 24
                                font.bold: true
                                color: globalTextColor
                            }
                            
                            Button {
                                text: "仅全局样式"
                                width: Math.min(300, parent.width)
                                height: 70
                                background: Rectangle {
                                    color: parent.pressed ? globalButtonPressedColor : (parent.hovered ? globalButtonHoverColor : globalButtonColor)
                                    radius: 8
                                }
                                contentItem: Text {
                                    text: parent.text
                                    color: "white"
                                    horizontalAlignment: Text.AlignHCenter
                                    verticalAlignment: Text.AlignVCenter
                                    font.pixelSize: globalFontSize
                                }
                            }
                        }
                        
                        // 2. 应用全局和窗口级别样式的按钮
                        Column {
                            width: parent.width
                            spacing: 10
                            
                            Text {
                                text: "全局 + 窗口样式"
                                font.pixelSize: 24
                                font.bold: true
                                color: globalTextColor
                            }
                            
                            Button {
                                id: windowLevelButton
                                text: "全局 + 窗口样式"
                                width: Math.min(300, parent.width)
                                height: 70
                                background: Rectangle {
                                    color: windowLevelButton.pressed ? "#1976D2" : (windowLevelButton.hovered ? "#1565C0" : "#2196F3")
                                    radius: 8
                                    border.color: "#0D47A1"
                                    border.width: 2
                                }
                                contentItem: Text {
                                    text: windowLevelButton.text
                                    color: "white"
                                    horizontalAlignment: Text.AlignHCenter
                                    verticalAlignment: Text.AlignVCenter
                                    font.pixelSize: globalFontSize
                                }
                            }
                        }
                        
                        // 3. 应用全局、窗口和控件级别样式的按钮
                        Column {
                            width: parent.width
                            spacing: 10
                            
                            Text {
                                text: "全局 + 窗口 + 控件样式"
                                font.pixelSize: 24
                                font.bold: true
                                color: globalTextColor
                            }
                            
                            Button {
                                id: widgetLevelButton
                                text: "全局 + 窗口 + 控件样式"
                                width: Math.min(300, parent.width)
                                height: 70
                                background: Rectangle {
                                    color: widgetLevelButton.pressed ? "#7B1FA2" : (widgetLevelButton.hovered ? "#8E24AA" : "#9C27B0")
                                    radius: 8
                                    border.width: 0
                                }
                                contentItem: Text {
                                    text: widgetLevelButton.text
                                    color: "white"
                                    horizontalAlignment: Text.AlignHCenter
                                    verticalAlignment: Text.AlignVCenter
                                    font.pixelSize: globalFontSize
                                    font.bold: true
                                }
                            }
                        }
                        
                        // 4. 应用特殊样式的按钮
                        Column {
                            width: parent.width
                            spacing: 10
                            
                            Text {
                                text: "特殊样式按钮"
                                font.pixelSize: 24
                                font.bold: true
                                color: globalTextColor
                            }
                            
                            Button {
                                id: specialButton
                                text: "特殊样式按钮"
                                width: Math.min(300, parent.width)
                                height: 70
                                background: Rectangle {
                                    color: specialButton.pressed ? "#E65100" : (specialButton.hovered ? "#F57C00" : "#FF9800")
                                    radius: 8
                                    border.color: "#E65100"
                                    border.width: 2
                                }
                                contentItem: Text {
                                    text: specialButton.text
                                    color: "white"
                                    horizontalAlignment: Text.AlignHCenter
                                    verticalAlignment: Text.AlignVCenter
                                    font.pixelSize: globalFontSize
                                    font.italic: true
                                }
                            }
                        }
                        
                        // 5. 组内控件样式
                        Column {
                            width: parent.width
                            spacing: 10
                            
                            Text {
                                text: "组内控件样式"
                                font.pixelSize: 24
                                font.bold: true
                                color: globalTextColor
                            }

    Rectangle {
                                width: parent.width
                                color: "white"
                                border.color: "#DDDDDD"
                                border.width: 2
                                radius: 8
                                
                                Column {
                                    anchors.fill: parent
                                    anchors.margins: 20
                                    spacing: 15
                                    
                                    Button {
                                        text: "组内按钮"
                                        width: Math.min(250, parent.width)
                                        height: 70
                                        background: Rectangle {
                                            color: parent.pressed ? globalButtonPressedColor : (parent.hovered ? globalButtonHoverColor : globalButtonColor)
                                            radius: 8
                                        }
                                        contentItem: Text {
                                            text: parent.text
                                            color: "white"
                                            horizontalAlignment: Text.AlignHCenter
                                            verticalAlignment: Text.AlignVCenter
                                            font.pixelSize: globalFontSize
                                        }
                                    }
                                    
                                    TextField {
                                        placeholderText: "组内输入框"
                                        width: Math.min(250, parent.width)
                                        height: 70
                                        background: Rectangle {
                                            color: "white"
                                            border.color: parent.activeFocus ? globalButtonColor : globalBorderColor
                                            border.width: 2
                                            radius: 8
                                        }
                                        font.pixelSize: globalFontSize
                                    }
                                    
                                    CheckBox {
                                        id: groupCheckbox
                                        text: "组内复选框"
                                        font.pixelSize: globalFontSize
                                        indicator: Rectangle {
                                            implicitWidth: 40
                                            implicitHeight: 40
                                            x: groupCheckbox.text ? (groupCheckbox.mirrored ? groupCheckbox.width - width - groupCheckbox.rightPadding : groupCheckbox.leftPadding) : groupCheckbox.leftPadding + (groupCheckbox.availableWidth - width) / 2
                                            y: groupCheckbox.topPadding + (groupCheckbox.availableHeight - height) / 2
                                            radius: 6
                                            border.color: globalBorderColor
                                            border.width: 2
                                            color: groupCheckbox.checked ? globalButtonColor : "white"
                                            
                                            Text {
        anchors.centerIn: parent
                                                text: "✓"
                                                color: "white"
                                                font.pixelSize: 28
                                                font.bold: true
                                                visible: groupCheckbox.checked
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            
            // 3. 自定义类和ID标签页
            Tab {
                title: "自定义类和ID"
                
                Flickable {
                    anchors.fill: parent
                    contentWidth: width
                    contentHeight: customColumn.height + 40
                    clip: true
                    
                    ScrollBar.vertical: ScrollBar {
                        policy: ScrollBar.AlwaysOn
                    }
                    
                    Column {
                        id: customColumn
                        width: parent.width
                        spacing: 20
                        topPadding: 20
                        leftPadding: 20
                        rightPadding: 20
                        bottomPadding: 20
                        
                        Text {
                            text: "可以通过设置对象名称（ID选择器）或继承自定义类来应用特定样式。"
                            width: parent.width
                            wrapMode: Text.WordWrap
                            font.pixelSize: 26
                            color: globalTextColor
                        }
                        
                        // ID选择器按钮
                        Column {
                            width: parent.width
                            spacing: 10
                            
                            Text {
                                text: "ID选择器按钮"
                                font.pixelSize: 24
                                font.bold: true
                                color: globalTextColor
                            }
                            
                            Button {
                                id: specialButtonId
                                text: "ID选择器按钮"
                                width: Math.min(300, parent.width)
                                height: 70
                                background: Rectangle {
                                    color: specialButtonId.pressed ? "#388E3C" : (specialButtonId.hovered ? "#43A047" : "#4CAF50")
                                    radius: 8
                                    border.width: 0
                                }
                                contentItem: Text {
                                    text: specialButtonId.text
                                    color: "white"
                                    horizontalAlignment: Text.AlignHCenter
                                    verticalAlignment: Text.AlignVCenter
                                    font.pixelSize: globalFontSize
                                    font.bold: true
                                }
                            }
                        }
                        
                        // 危险按钮
                        Column {
                            width: parent.width
                            spacing: 10
                            
                            Text {
                                text: "危险按钮"
                                font.pixelSize: 24
                                font.bold: true
                                color: globalTextColor
                            }
                            
                            Button {
                                id: dangerButtonId
                                text: "危险按钮"
                                width: Math.min(300, parent.width)
                                height: 70
                                background: Rectangle {
                                    color: dangerButtonId.pressed ? "#C62828" : (dangerButtonId.hovered ? "#D32F2F" : "#F44336")
                                    radius: 8
                                    border.width: 0
                                }
                                contentItem: Text {
                                    text: dangerButtonId.text
                                    color: "white"
                                    horizontalAlignment: Text.AlignHCenter
                                    verticalAlignment: Text.AlignVCenter
                                    font.pixelSize: globalFontSize
                                }
                            }
                        }
                        
                        // 主要按钮
                        Column {
                            width: parent.width
                            spacing: 10
                            
                            Text {
                                text: "主要按钮（primary类）"
                                font.pixelSize: 24
                                font.bold: true
                                color: globalTextColor
                            }
                            
                            Button {
                                id: primaryButton
                                text: "主要按钮"
                                width: Math.min(300, parent.width)
                                height: 70
                                background: Rectangle {
                                    color: primaryButton.pressed ? "#1565C0" : (primaryButton.hovered ? "#1976D2" : "#2196F3")
                                    radius: 8
                                    border.color: "#1976D2"
                                    border.width: 4
                                }
                                contentItem: Text {
                                    text: primaryButton.text
                                    color: "white"
                                    horizontalAlignment: Text.AlignHCenter
                                    verticalAlignment: Text.AlignVCenter
                                    font.pixelSize: globalFontSize
                                }
                            }
                        }
                        
                        // 次要按钮
                        Column {
                            width: parent.width
                            spacing: 10
                            
                            Text {
                                text: "次要按钮（secondary类）"
                                font.pixelSize: 24
                                font.bold: true
                                color: globalTextColor
                            }
                            
                            Button {
                                id: secondaryButton
                                text: "次要按钮"
                                width: Math.min(300, parent.width)
                                height: 70
                                background: Rectangle {
                                    color: secondaryButton.pressed ? "#455A64" : (secondaryButton.hovered ? "#546E7A" : "#607D8B")
                                    radius: 8
                                    border.width: 0
                                }
                                contentItem: Text {
                                    text: secondaryButton.text
                                    color: "white"
                                    horizontalAlignment: Text.AlignHCenter
                                    verticalAlignment: Text.AlignVCenter
                                    font.pixelSize: globalFontSize
                                }
                            }
                        }
                        
                        // 复杂样式按钮
                        Column {
                            width: parent.width
                            spacing: 10

        Text {
                                text: "复杂样式按钮（primary large类）"
                                font.pixelSize: 24
                                font.bold: true
                                color: globalTextColor
                            }
                            
                            Button {
                                id: complexButton
                                text: "复杂样式按钮"
                                width: Math.min(300, parent.width)
                                height: 90
                                background: Rectangle {
                                    color: complexButton.pressed ? "#1565C0" : (complexButton.hovered ? "#1976D2" : "#2196F3")
                                    radius: 8
                                    border.width: 0
                                }
                                contentItem: Text {
                                    text: complexButton.text
                                    color: "white"
                                    horizontalAlignment: Text.AlignHCenter
                                    verticalAlignment: Text.AlignVCenter
            font.pixelSize: 32
                                    font.bold: true
                                }
                            }
                        }
                    }
                }
            }
            
            // 4. 伪状态样式标签页
            Tab {
                title: "伪状态样式"
                
                Flickable {
                    anchors.fill: parent
                    contentWidth: width
                    contentHeight: pseudoColumn.height + 40
                    clip: true
                    
                    ScrollBar.vertical: ScrollBar {
                        policy: ScrollBar.AlwaysOn
                    }
                    
                    Column {
                        id: pseudoColumn
                        width: parent.width
                        spacing: 20
                        topPadding: 20
                        leftPadding: 20
                        rightPadding: 20
                        bottomPadding: 20
                        
                        Text {
                            text: "Qt样式表支持伪状态（如:hover, :pressed, :checked等）来为控件的不同状态定义样式。"
                            width: parent.width
                            wrapMode: Text.WordWrap
                            font.pixelSize: 26
                            color: globalTextColor
                        }
                        
                        // 具有悬停、按下状态的按钮
                        Column {
                            width: parent.width
                            spacing: 10
                            
                            Text {
                                text: "悬停和按下效果"
                                font.pixelSize: 24
                                font.bold: true
                                color: globalTextColor
                            }
                            
                            Button {
                                id: stateButton
                                text: "悬停和按下效果"
                                width: Math.min(300, parent.width)
                                height: 70
                                background: Rectangle {
                                    color: stateButton.pressed ? "#1565C0" : (stateButton.hovered ? "#1976D2" : "#2196F3")
                                    radius: 8
                                    border.width: stateButton.pressed ? 3 : (stateButton.hovered ? 2 : 0)
                                    border.color: "#0D47A1"
                                }
                                contentItem: Text {
                                    text: stateButton.text
                                    color: "white"
                                    horizontalAlignment: Text.AlignHCenter
                                    verticalAlignment: Text.AlignVCenter
                                    font.pixelSize: globalFontSize
                                    font.bold: stateButton.hovered
                                }
                            }
                        }
                        
                        // 具有焦点状态的输入框
                        Column {
                            width: parent.width
                            spacing: 10
                            
                            Text {
                                text: "获取焦点查看效果"
                                font.pixelSize: 24
                                font.bold: true
                                color: globalTextColor
                            }
                            
                            TextField {
                                id: focusLineEdit
                                placeholderText: "获取焦点查看效果"
                                width: Math.min(300, parent.width)
                                height: 70
                                background: Rectangle {
                                    color: focusLineEdit.activeFocus ? "#F5F5F5" : "white"
                                    border.color: focusLineEdit.activeFocus ? globalButtonColor : globalBorderColor
                                    border.width: focusLineEdit.activeFocus ? 3 : 2
                                    radius: 8
                                }
                                font.pixelSize: globalFontSize
                            }
                        }
                        
                        // 具有选中和未选中状态的复选框
                        Column {
                            width: parent.width
                            spacing: 10
                            
                            Text {
                                text: "复选框状态"
                                font.pixelSize: 24
                                font.bold: true
                                color: globalTextColor
                            }
                            
                            Row {
                                width: parent.width
                                spacing: 20
                                
                                CheckBox {
                                    id: pseudoCheckbox1
                                    text: "复选框 1"
                                    font.pixelSize: globalFontSize
                                    indicator: Rectangle {
                                        implicitWidth: 40
                                        implicitHeight: 40
                                        x: pseudoCheckbox1.text ? (pseudoCheckbox1.mirrored ? pseudoCheckbox1.width - width - pseudoCheckbox1.rightPadding : pseudoCheckbox1.leftPadding) : pseudoCheckbox1.leftPadding + (pseudoCheckbox1.availableWidth - width) / 2
                                        y: pseudoCheckbox1.topPadding + (pseudoCheckbox1.availableHeight - height) / 2
                                        radius: 6
                                        border.color: pseudoCheckbox1.checked ? globalButtonColor : globalBorderColor
                                        border.width: 2
                                        color: pseudoCheckbox1.checked ? globalButtonColor : "white"
                                        
                                        Text {
                                            anchors.centerIn: parent
                                            text: "✓"
                                            color: "white"
                                            font.pixelSize: 28
                                            font.bold: true
                                            visible: pseudoCheckbox1.checked
                                        }
                                    }
                                }
                                
                                CheckBox {
                                    id: pseudoCheckbox2
                                    text: "复选框 2"
                                    checked: true
                                    font.pixelSize: globalFontSize
                                    indicator: Rectangle {
                                        implicitWidth: 40
                                        implicitHeight: 40
                                        x: pseudoCheckbox2.text ? (pseudoCheckbox2.mirrored ? pseudoCheckbox2.width - width - pseudoCheckbox2.rightPadding : pseudoCheckbox2.leftPadding) : pseudoCheckbox2.leftPadding + (pseudoCheckbox2.availableWidth - width) / 2
                                        y: pseudoCheckbox2.topPadding + (pseudoCheckbox2.availableHeight - height) / 2
                                        radius: 6
                                        border.color: pseudoCheckbox2.checked ? globalButtonColor : globalBorderColor
                                        border.width: 2
                                        color: pseudoCheckbox2.checked ? globalButtonColor : "white"
                                        
                                        Text {
            anchors.centerIn: parent
                                            text: "✓"
                                            color: "white"
                                            font.pixelSize: 28
                                            font.bold: true
                                            visible: pseudoCheckbox2.checked
                                        }
                                    }
                                }
                            }
                        }
                        
                        // 禁用状态的控件
                        Column {
                            width: parent.width
                            spacing: 10
                            
                            Text {
                                text: "禁用状态"
                                font.pixelSize: 24
                                font.bold: true
                                color: globalTextColor
                            }
                            
                            Row {
                                width: parent.width
                                spacing: 20
                                
                                Button {
                                    text: "禁用按钮"
                                    enabled: false
                                    width: Math.min(200, (parent.width - parent.spacing) / 2)
                                    height: 70
                                    background: Rectangle {
                                        color: "#BDBDBD"
                                        radius: 8
                                        opacity: 0.6
                                    }
                                    contentItem: Text {
                                        text: parent.text
                                        color: "#757575"
                                        horizontalAlignment: Text.AlignHCenter
                                        verticalAlignment: Text.AlignVCenter
                                        font.pixelSize: globalFontSize
                                    }
                                }
                                
                                TextField {
                                    placeholderText: "禁用输入框"
                                    enabled: false
                                    width: Math.min(200, (parent.width - parent.spacing) / 2)
                                    height: 70
                                    background: Rectangle {
                                        color: "#F5F5F5"
                                        border.color: "#E0E0E0"
                                        border.width: 2
                                        radius: 8
                                    }
                                    font.pixelSize: globalFontSize
                                }
                            }
                        }
                        
                        // 只读状态的文本编辑框
                        Column {
                            width: parent.width
                            spacing: 10
                            
                            Text {
                                text: "只读文本编辑框"
                                font.pixelSize: 24
                                font.bold: true
                                color: globalTextColor
                            }
                            
                            ScrollView {
                                width: Math.min(300, parent.width)
                                height: 150
                                
                                TextArea {
                                    readOnly: true
                                    text: "这是一个只读的文本编辑框"
                                    background: Rectangle {
                                        color: "#F5F5F5"
                                        border.color: globalBorderColor
                                        border.width: 2
                                        radius: 8
                                    }
                                    font.pixelSize: globalFontSize
                                    color: "#757575"
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
